<template>
  <nav id="nav">
      <router-link
        class="link"
        to="/"
        active-class="active"
        exact
        tag="div"
      >
        1、加载天地图底图
      </router-link>
      <router-link
        v-for="(nav, index) in navList"
        :key="index"
        class="link"
        :to="nav.to"
        active-class="active"
        tag="div"
      >
        {{index+2}}、 {{nav.title}}
      </router-link>
    </nav>
</template>

<script>
export default {
  name: 'rootNav',
  data () {
    return {
      navList: [
        {
          title: '自定义天地图样式',
          to: '/customTiandituStyle'
        },
         {
          title: '加载ArcGIS 切片服务和弹窗',
          to: '/popup'
        },
        {
          title: '加载切片超时取消请求',
          to: '/tileCancle'
        },
        {
          title: '加载ArcGIS 动态服务',
          to: '/imageArcGISRest'
        },
        {
          title: '加载geoserver wms服务',
          to: '/geoserverWMS'
        },
        {
          title: '加载超图Iserver 切片',
          to: '/superMapTile'
        },//加载超图Iserver切片
        {
          title: '超图Iserver数据服务查询',
          to: '/superMapDataServicesQuery'
        },
        {
          title: '加载Geoserver 切片服务',
          to: '/geoServerTileLayer'
        },
        {
          title: '加载Geoserver WFS要素服务',
          to: '/geoServerWFSLayer'
        },
        {
          title: 'Map对象的事件使用',
          to: '/mapEventUse'
        },//map的事件使用
        {
          title: '标记 marker(overlay实现)',
          to: '/mapMarker'
        },
        {
          title: '地图缩放级别 zoom',
          to: '/zoom'
        },
        {
          title: '单击激活地图 tabindex',
          to: '/tabindex'
        },
        {
          title: '切换地图容器',
          to: '/changeTarget'
        },
        {
          title: '同步两个地图',
          to: '/synchronization'
        },
        {
          title: '预加载 preload',
          to: '/preloadMap'
        },
        {
          title: '矢量图 GeoJSON',
          to: '/vectorJSON'
        },
        {
          title: '矢量图 GeoJSON 裁剪',
          to: '/vectorJSONClipTile'
        },
        {
          title: '矢量图 高亮',
          to: '/vectorHigh'
        },
        {
          title: '旋转 rotation',
          to: '/rotationMap'
        },
        {
          title: '鼠标拖拽旋转/缩放',
          to: '/mouseRotationMap'
        },
        {
          title: '动画 animate',
          to: '/viewAnimate'
        },
        {
          title: '网格 Graticule',
          to: '/graticule'
        },
        {
          title: '热力图 Heatmap',
          to: '/heatmap'
        },
        {
          title: '比例尺控件 ScaleLine',
          to: '/scaleLine'
        },
        {
          title: '全屏控件 FullScreen',
          to: '/fullScreen'
        },
        {
          title: '导览控件 ZoomToExtent',
          to: '/zoomToExtent'
        },
        {
          title: '总览控件 OverviewMap',
          to: '/overviewMap'
        },
        {
          title: '鼠标位置控件 MousePosition',
          to: '/mousePosition'
        },
        {
          title: '缩放滑块控件 ZoomSlider',
          to: '/zoomSlider'
        },
        {
          title: '图层组 Group',
          to: '/layerSet'
        },
        {
          title: '控制图层层叠关系 Set zIndex',
          to: '/setZIndex'
        },
        {
          title: '限制分辨率',
          to: '/setResolution'
        },
        {
          title: '按限制范围加载图层',
          to: '/setExtent'
        },
        {
          title: '图层遮罩效果',
          to: '/coverageModal'
        },
        {
          title: '设置图层的源 setSource',
          to: '/setSource'
        },
        {
          title: '简单的标记',
          to: '/simplenessLabel'
        },
        {
          title: '定义标记颜色',
          to: '/brightMark'
        },
        {
          title: '聚合数据',
          to: '/polymerization'
        },
        {
          title: '绘制点、线、面',
          to: '/basicDraw'
        },
        {
          title: '绘制图形',
          to: '/drawGraph'
        },
        {
          title: '自由绘制图形',
          to: '/freeDrawing'
        },
        {
          title: '测量长度和面积',
          to: '/measurement'
        },
        {
          title: '带箭头的线段',
          to: '/arrowLine'
        },
        {
          title: '修改已绘制的图形',
          to: '/snapGraph'
        },
        {
          title: '导出地图',
          to: '/mapExport'
        },
        {
          title: '要素编辑',
          to: '/featureEdit'
        },
        {
          title: '请求加载Arcgis Feature',
          to: '/arcGISFeatures'
        },
        {
          title: '等值面',
          to: '/dengzhimian'
        },{
          title: 'olSecium三维',
          to: '/olCesium'
        }
        ,{
          title: '卷帘效果',
          to: '/twoMapCover'
        }
        ,{
          title: '矢量切片加载',
          to: '/vectorTiles'
        }
        ,{
          title: '前端矢量切片',
          to: '/geojsonVT'
        }
        ,{
          title: '前端矢量缓冲阴影',
          to: '/bufferShadow'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/assets/css/varibles.scss';

  #nav {
    min-width: 200px;
    // min-width: 15%;
    height: 100vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-right: 20px;
    border-right: 1px solid #eee;
  }

  .link {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
    color: $darkTextColor;
    cursor: pointer;
  }

  .active {
    // background: $abgColor;
    background: $acticeBacgroundColor;
    color: #fff;
    // border-bottom: none;
    border-bottom: 2px solid #67C23A;
  }

  /*滚动条样式*/
  #nav::-webkit-scrollbar {
      width: 5px;
      /*height: 4px;*/
  }
  
  #nav::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(226, 13, 13, 0.2);
      background: $acticeBacgroundColor;
  }
  
  #nav::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: #f9f9f9;
  }
</style>